/* ============================================================
   TOKENS.CSS — Design System Variables
   ──────────────────────────────────────────────────────────
   Art direction : Data Analytics professional + Published Researcher
   Tone          : Analytical precision with intellectual warmth
                   Reference: Distill.pub meets Linear.app
   Palette       : Warm neutral surfaces · Teal primary (analytical/
                   trustworthy) · Amber reserved for research only
   Typography    : Cabinet Grotesk (display, 24px+)
                   Satoshi (body, all sizes)
                   JetBrains Mono (code labels, tech tags)
   Density       : Balanced — spacious hero/about, denser skills/certs
   ============================================================ */

:root,
[data-theme="light"] {
  /* ── Type Scale — fluid clamp() ─────────────────────────
     Floor is always in rem (zoom-safe), mid uses vw mix,
     cap is always rem. 12px absolute minimum floor.       */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12→14px */
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); /* 14→16px */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16→18px */
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); /* 18→24px */
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); /* 24→36px */
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); /* 32→56px */
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem); /* 40→80px */
  --text-hero: clamp(2.75rem, 0.9rem + 5.8vw, 6rem); /* 44→96px */

  /* ── Spacing — 4px base unit ─────────────────────────── */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */

  /* ── Surfaces — Nexus Warm Beige ─────────────────────── */
  --color-bg: #f7f6f2;
  --color-surface: #f9f8f5;
  --color-surface-2: #fbfbf9;
  --color-surface-offset: #f3f0ec;
  --color-surface-offset-2: #edeae5;
  --color-surface-dynamic: #e6e4df;
  --color-divider: #dcd9d5;
  --color-border: #d4d1ca;

  /* ── Text — Sylph Gray ───────────────────────────────── */
  --color-text: #28251d;
  --color-text-muted: #66645c;
  --color-text-faint: #bab9b4;
  --color-text-inverse: #f9f8f4;

  /* ── Primary Accent — Hydra Teal ─────────────────────── */
  --color-primary: #01696f;
  --color-primary-hover: #0c4e54;
  --color-primary-active: #0f3638;
  --color-primary-highlight: #cedcd8;

  /* ── Research Accent — Altana Amber ──────────────────────
     Used ONLY on publication/research section elements.
     Never as a general UI accent.                         */
  --color-research: #c98a00;
  --color-research-hover: #a07000;
  --color-research-highlight: #ede0c2;
  --color-research-text: #7a5200;

  /* ── Status colours ──────────────────────────────────── */
  --color-success: #437a22;
  --color-success-highlight: #d4dfcc;
  --color-error: #a12c7b;
  --color-error-highlight: #e0ced7;
  --color-warning: #964219;
  --color-warning-highlight: #ddcfc6;

  /* ── Border Radius ───────────────────────────────────── */
  --radius-sm: 0.375rem; /*  6px */
  --radius-md: 0.5rem; /*  8px */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */
  --radius-2xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* ── Shadows — warm-tinted to match beige surfaces ───── */
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.12);
  --shadow-xl: 0 24px 48px oklch(0.2 0.01 80 / 0.16);

  /* ── Transitions ─────────────────────────────────────── */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Content widths ──────────────────────────────────── */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;

  /* ── Font families ───────────────────────────────────────
     --font-display : Cabinet Grotesk — confident, editorial.
                      ONLY at --text-xl (24px) and above.
     --font-body    : Satoshi — precise, warm, excellent 16px.
                      All body copy, UI chrome, buttons.
     --font-code    : JetBrains Mono — for tech tags, skill
                      labels, stat numbers. Data-professional signal. */
  --font-display: "Cabinet Grotesk", "Helvetica Neue", sans-serif;
  --font-body: "Satoshi", "Inter", sans-serif;
  --font-code: "JetBrains Mono", "Fira Code", monospace;

  /* ── Z-index scale ───────────────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-nav: 400;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Surfaces — deep charcoal */
  --color-bg: #171614;
  --color-surface: #1c1b19;
  --color-surface-2: #201f1d;
  --color-surface-offset: #1d1c1a;
  --color-surface-offset-2: #22211f;
  --color-surface-dynamic: #2d2c2a;
  --color-divider: #262523;
  --color-border: #393836;

  /* Text */
  --color-text: #cdccca;
  --color-text-muted: #999791;
  --color-text-faint: #5a5957;
  --color-text-inverse: #2b2a28;

  /* Primary — lighter teal for dark bg contrast */
  --color-primary: #4f98a3;
  --color-primary-hover: #227f8b;
  --color-primary-active: #1a626b;
  --color-primary-highlight: #1e3335;

  /* Research — warm amber works well on dark */
  --color-research: #e8af34;
  --color-research-hover: #fdc551;
  --color-research-highlight: #3a3020;
  --color-research-text: #fdc551;

  /* Status */
  --color-success: #6daa45;
  --color-success-highlight: #1e2e18;
  --color-error: #d163a7;
  --color-error-highlight: #2e1f2b;
  --color-warning: #bb653b;
  --color-warning-highlight: #2e2018;

  /* Shadows — pure black on dark bg */
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.25);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 12px 36px oklch(0 0 0 / 0.45);
  --shadow-xl: 0 24px 56px oklch(0 0 0 / 0.55);
}

/* ── System preference fallback ─────────────────────────────
   Activates dark tokens when OS is in dark mode AND the user
   hasn't manually toggled. Duplicates [data-theme="dark"].  */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #171614;
    --color-surface: #1c1b19;
    --color-surface-2: #201f1d;
    --color-surface-offset: #1d1c1a;
    --color-surface-offset-2: #22211f;
    --color-surface-dynamic: #2d2c2a;
    --color-divider: #262523;
    --color-border: #393836;
    --color-text: #cdccca;
    --color-text-muted: #999791;
    --color-text-faint: #5a5957;
    --color-text-inverse: #2b2a28;
    --color-primary: #4f98a3;
    --color-primary-hover: #227f8b;
    --color-primary-active: #1a626b;
    --color-primary-highlight: #1e3335;
    --color-research: #e8af34;
    --color-research-hover: #fdc551;
    --color-research-highlight: #3a3020;
    --color-research-text: #fdc551;
    --color-success: #6daa45;
    --color-success-highlight: #1e2e18;
    --color-error: #d163a7;
    --color-error-highlight: #2e1f2b;
    --color-warning: #bb653b;
    --color-warning-highlight: #2e2018;
    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.25);
    --shadow-md: 0 4px 14px oklch(0 0 0 / 0.35);
    --shadow-lg: 0 12px 36px oklch(0 0 0 / 0.45);
    --shadow-xl: 0 24px 56px oklch(0 0 0 / 0.55);
  }
}